<template>
    <div class="set-wallpaper-container">
        <div class="setting-panel">
            <div class="sidebar-autoHide flex-x flex-between">
                <label>深色模式</label>
                <el-switch size="small" v-model="darkFlag"></el-switch>
            </div>
            <div class="sidebar-autoHide flex-x flex-between">
                <label>跟随系统</label>
                <el-switch size="small"></el-switch>
            </div>
            <hr mt10 mb10/>
            <h2 leh-36>文字颜色</h2>
            <ul flex class="color-select-list" pd0>
                <li v-for="item in bgColors">
                    <div class="color-select-item" style="margin-right: 5px;"
                        :style="{ background: item, borderColor: item == '#fff' ? '#0000004d' : 'transparent' }"
                        @click="handleSelectBgColor(item)">
                        <i class="iconfont icon-gou" v-if="item == primaryColor"
                            :style="{ color: item == '#fff' ? '#0000004d' : '#fff' }"></i>
                    </div>
                </li>
                <li>
                    <el-color-picker v-model="primaryColor" />
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useGlobalStore } from '@/store/module/global'

const globalStore = useGlobalStore()

const darkFlag = ref(globalStore.dark)

const primaryColor = ref(globalStore.primaryColor)

const bgColors = ['rgb(22, 129, 255)', 'rgb(251, 190, 35)', 'rgb(252, 69, 72)', 'rgb(46, 204, 113)', 'rgb(51, 197, 197)', 'rgb(155, 89, 182)', 'rgb(241, 196, 15)', 'rgb(230, 126, 34)', 'rgb(231, 76, 60)']

const handleSelectBgColor = (color: string) => {
    primaryColor.value = color
    document.documentElement.style.setProperty('--el-color-primary',color)
}

watchEffect(() => {
    globalStore.setGlobal("dark",darkFlag.value)
    globalStore.setGlobal("primaryColor",primaryColor.value)
})
</script>

<style scoped></style>